<!--
 * @Author: RAY_HUI 1541917867@qq.com
 * @Date: 2025-07-07 10:24:42
 * @LastEditors: RAY_HUI 1541917867@qq.com
 * @LastEditTime: 2025-08-03 17:28:12
 * @FilePath: \website-reconstruction---vue\src\components\sections\home\ServicesSection.vue
 * @Description: 
 * 
 * Copyright (c) 2025 by ${git_name_email}, All Rights Reserved. 
-->
<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import { getRandomAnimation } from '@/utils/tools/tools'
// 路由跳转
const router = useRouter()
import { DataProp } from '@/types/selfdefine/Layout'

const props = defineProps<{
  data: DataProp | undefined
}>()
const Incos = [
  'far fa-check-square',
  'fa fa-bed',
  'fas fa-chart-bar',
  'fa fa-shopping-cart',
]
interface Service {
  id: number
  icon: string
  title: string
  description: string
  routeName?: string
  delay: string
  animation: string
}

// ✅ 自动响应 props.data 变化
const services = computed(() => {
  if (!props.data?.partContentVoList) return []

  return props.data.partContentVoList.map((item, index) => {
    return {
      id: item.partId,
      icon: Incos[index % Incos.length],
      title: item.title,
      description: item.content,
      routeName: item.url,
      delay: '0.3s',
      animation: getRandomAnimation(),
    }
  })
})

// 点击跳转方法
const goToService = (route?: string) => {
  if (route) {
    router.push(route)
  }
}
</script>

<template>
  <section class="section-padding" id="services">
    <div class="container" v-if="data.partTitle">
      <!-- Section Header -->
      <div class="section-header text-center">
        <div class="section-heading">
          <h3 class="text-custom-black">
            {{ data.partTitle.slice(0, 3) }}
            <span class="text-custom-blue">{{ data.partTitle.slice(3) }}</span>
          </h3>
          <div class="section-description">
            <p class="text-light-dark">
              {{ data.content }}
            </p>
          </div>
        </div>
      </div>

      <!-- Services Grid -->
      <div class="row">
        <div
          v-for="service in services"
          :key="service.id"
          class="col-lg-3 col-sm-6"
          :class="`wow ${service.animation}`"
          :data-wow-delay="service.delay"
        >
          <a
            href="#"
            class="services-small-item"
            @click.prevent="goToService(service.routeName)"
          >
            <div class="icon"><i :class="service.icon"></i></div>
            <h5 class="services-title">{{ service.title }}</h5>
            <p>{{ service.description }}</p>
            <div class="button"><i class="fa fa-chevron-right"></i></div>
          </a>
          <div class="item-bg"></div>
        </div>
      </div>
    </div>
  </section>
</template>
